<template>
  <view class="login-container">
    <!-- 顶部装饰 -->
    <view class="header-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 标题区域 -->
    <view class="title-section">
      <text class="app-title">松鼠存存</text>
      <text class="app-subtitle">让每一笔账都清清楚楚</text>
    </view>

    <!-- 切换标签 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'login' }"
        @click="switchTab('login')"
      >
        登录
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'register' }"
        @click="switchTab('register')"
      >
        注册
      </view>
    </view>

    <!-- 登录表单 -->
    <view v-if="activeTab === 'login'" class="form-container">
      <view class="input-group">
        <text class="input-label">用户名</text>
        <input 
          class="input-field" 
          v-model="loginForm.username" 
          placeholder="请输入用户名"
          maxlength="20"
        />
      </view>
      
      <view class="input-group">
        <text class="input-label">密码</text>
        <input 
          class="input-field" 
          v-model="loginForm.password" 
          type="password" 
          placeholder="请输入密码"
          maxlength="20"
        />
      </view>

      <button class="submit-btn" @click="handleLogin" :disabled="isLoading">
        {{ isLoading ? '登录中...' : '登录' }}
      </button>
    </view>

    <!-- 注册表单 -->
    <view v-if="activeTab === 'register'" class="form-container">
      <view class="input-group">
        <text class="input-label">用户名</text>
        <input 
          class="input-field" 
          v-model="registerForm.username" 
          placeholder="请输入用户名(3-20位)"
          maxlength="20"
        />
      </view>
      
      <view class="input-group">
        <text class="input-label">密码</text>
        <input 
          class="input-field" 
          v-model="registerForm.password" 
          type="password" 
          placeholder="请输入密码(6-20位)"
          maxlength="20"
        />
      </view>

      <view class="input-group">
        <text class="input-label">确认密码</text>
        <input 
          class="input-field" 
          v-model="registerForm.confirmPassword" 
          type="password" 
          placeholder="请再次输入密码"
          maxlength="20"
        />
      </view>

      <view class="input-group">
        <text class="input-label">邮箱</text>
        <input 
          class="input-field" 
          v-model="registerForm.email" 
          type="email" 
          placeholder="请输入邮箱(可选)"
          maxlength="100"
        />
      </view>

      <view class="input-group">
        <text class="input-label">昵称</text>
        <input 
          class="input-field" 
          v-model="registerForm.nickname" 
          placeholder="请输入昵称(可选)"
          maxlength="50"
        />
      </view>

      <button class="submit-btn" @click="handleRegister" :disabled="isLoading">
        {{ isLoading ? '注册中...' : '注册' }}
      </button>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tips">
      <text class="tip-text">
        {{ activeTab === 'login' ? '还没有账号？' : '已有账号？' }}
        <text class="link-text" @click="switchTab(activeTab === 'login' ? 'register' : 'login')">
          {{ activeTab === 'login' ? '立即注册' : '立即登录' }}
        </text>
      </text>
    </view>
  </view>
</template>

<script>
import { userAPI, apiUtils } from '@/utils/api.js';

export default {
  name: 'Login',
  data() {
    return {
      activeTab: 'login',
      isLoading: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        nickname: ''
      }
    };
  },
  onLoad() {
    // 检查是否已登录
    if (apiUtils.isLoggedIn()) {
      this.redirectToHome();
    }
  },
  methods: {
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab;
      this.resetForms();
    },

    // 重置表单
    resetForms() {
      this.loginForm = { username: '', password: '' };
      this.registerForm = { username: '', password: '', confirmPassword: '', email: '', nickname: '' };
    },

    // 验证登录表单
    validateLoginForm() {
      if (!this.loginForm.username.trim()) {
        uni.showToast({ title: '请输入用户名', icon: 'none' });
        return false;
      }
      if (!this.loginForm.password.trim()) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return false;
      }
      return true;
    },

    // 验证注册表单
    validateRegisterForm() {
      if (!this.registerForm.username.trim()) {
        uni.showToast({ title: '请输入用户名', icon: 'none' });
        return false;
      }
      if (this.registerForm.username.length < 3) {
        uni.showToast({ title: '用户名至少3位', icon: 'none' });
        return false;
      }
      if (!this.registerForm.password.trim()) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return false;
      }
      if (this.registerForm.password.length < 6) {
        uni.showToast({ title: '密码至少6位', icon: 'none' });
        return false;
      }
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' });
        return false;
      }
      if (this.registerForm.email && !this.isValidEmail(this.registerForm.email)) {
        uni.showToast({ title: '邮箱格式不正确', icon: 'none' });
        return false;
      }
      return true;
    },

    // 验证邮箱格式
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    },

    // 处理登录
    async handleLogin() {
      if (!this.validateLoginForm()) return;
      
      this.isLoading = true;
      try {
        const result = await userAPI.login(this.loginForm);
        
        // 保存token和用户信息
        apiUtils.setToken(result.token);
        uni.setStorageSync('userInfo', result.user);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        setTimeout(() => {
          this.redirectToHome();
        }, 1000);
        
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 处理注册
    async handleRegister() {
      if (!this.validateRegisterForm()) return;
      
      this.isLoading = true;
      try {
        const registerData = {
          username: this.registerForm.username.trim(),
          password: this.registerForm.password,
          email: this.registerForm.email.trim() || null,
          nickname: this.registerForm.nickname.trim() || null
        };
        
        await userAPI.register(registerData);
        
        uni.showToast({
          title: '注册成功，请登录',
          icon: 'success'
        });
        
        // 切换到登录标签
        this.switchTab('login');
        
      } catch (error) {
        uni.showToast({
          title: error.message || '注册失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 跳转到首页
    redirectToHome() {
      uni.reLaunch({
        url: '/layout/main'
      });
    }
  }
};
</script>

<style lang="scss">
	@import '../../uni.scss';

.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    
    &.circle-1 {
      width: 300rpx;
      height: 300rpx;
      top: -150rpx;
      right: -100rpx;
      background: rgba(255, 255, 255, 0.06);
      animation-delay: 0s;
    }
    
    &.circle-2 {
      width: 200rpx;
      height: 200rpx;
      bottom: -100rpx;
      left: -50rpx;
      background: rgba(255, 255, 255, 0.04);
      animation-delay: 2s;
    }
    
    &.circle-3 {
      width: 150rpx;
      height: 150rpx;
      top: 50%;
      left: -75rpx;
      background: rgba(255, 255, 255, 0.03);
      animation-delay: 4s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.title-section {
  text-align: center;
  margin-bottom: 80rpx;
  position: relative;
  z-index: 1;
  animation: fadeInDown 1s ease-out;
  
  .app-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 20rpx;
    text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
    letter-spacing: 2rpx;
  }
  
  .app-subtitle {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-container {
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50rpx;
  width: 100%;
  padding: 8rpx;
  margin-bottom: 60rpx;
  backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out 0.2s both;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }
    
    &:active::before {
      left: 100%;
    }
    
    &.active {
      background: linear-gradient(135deg, #ff6b9d, #ff8eab);
      color: #FFFFFF;
      font-weight: bold;
      box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.4);
      transform: scale(1.05);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-container {
  width: 100%;
  max-width: 600rpx;
  animation: fadeInUp 1s ease-out 0.4s both;
  
  .input-group {
    margin-bottom: 40rpx;
    
    .input-label {
      display: block;
      font-size: 28rpx;
      color: #FFFFFF;
      margin-bottom: 20rpx;
      font-weight: 500;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
    
    .input-field {
      width: 100%;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.95);
      border: 2rpx solid transparent;
      border-radius: 40rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #333333;
      box-sizing: border-box;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10rpx);
      
      &:focus {
        border-color: #ff6b9d;
        box-shadow: 0 0 0 6rpx rgba(255, 107, 157, 0.15), 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
        transform: translateY(-2rpx);
      }
      
      &::placeholder {
        color: #999999;
        font-style: italic;
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(135deg, #ff6b9d, #ff8eab);
    border: none;
    border-radius: 40rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
    }
    
    &:active {
      transform: translateY(2rpx) scale(0.98);
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.4);
    }
    
    &:active::before {
      left: 100%;
    }
    
    &:disabled {
      opacity: 0.6;
      transform: none;
      box-shadow: none;
      cursor: not-allowed;
    }
  }
}

.bottom-tips {
  text-align: center;
  margin-top: 80rpx;
  position: relative;
  z-index: 1;
  animation: fadeInUp 1s ease-out 0.6s both;
  
  .tip-text {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
    
    .link-text {
      color: #FFD700;
      text-decoration: underline;
      transition: all 0.3s ease;
      font-weight: 500;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      
      &:active {
        color: #FFA500;
        transform: scale(1.05);
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .login-container {
    padding: 30rpx;
  }
  
  .title-section {
    margin-bottom: 60rpx;
    
    .app-title {
      font-size: 40rpx;
    }
    
    .app-subtitle {
      font-size: 24rpx;
    }
  }
  
  .tab-container {
    margin-bottom: 50rpx;
    
    .tab-item {
      font-size: 26rpx;
      padding: 18rpx 0;
    }
  }
  
  .form-container {
    .input-group {
      margin-bottom: 35rpx;
      
      .input-label {
        font-size: 26rpx;
      }
      
      .input-field {
        height: 75rpx;
        font-size: 26rpx;
      }
    }
    
    .submit-btn {
      height: 75rpx;
      font-size: 30rpx;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .login-container {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
  
  .input-field {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2c3e50 !important;
  }
}
</style>

